<template>
  <div class="pay-result-container">
    <!-- 背景装饰元素（增强视觉层次） -->
    <div class="bg-decoration top-left"></div>
    <div class="bg-decoration bottom-right"></div>

    <!-- 支付成功核心卡片（带入场动画） -->
    <el-card class="result-card shadow-lg" :class="{ 'fade-in': cardVisible }">
      <!-- 支付成功图标（带缩放动效） -->
      <div class="success-icon-wrapper text-center mb-6">
        <div class="success-icon bg-gradient-to-br from-green-500 to-green-600 text-white flex items-center justify-center rounded-full w-24 h-24 mx-auto shadow-lg animate-pulse-slow">
          <i class="el-icon-success text-5xl"></i>
        </div>
      </div>

      <!-- 标题与副标题 -->
      <div class="text-center mb-10">
        <h2 class="text-[clamp(1.5rem,3vw,2.2rem)] font-bold text-gray-800 tracking-tight">支付成功！</h2>
        <p class="text-gray-500 mt-3 text-[clamp(0.9rem,1.5vw,1rem)] max-w-md mx-auto">
          您的保费已支付完成，保单将在24小时内生效，生效后可在「我的保单」中查看
        </p>
      </div>

      <!-- 支付信息卡片（带悬浮动效） -->
      <div class="info-card bg-white rounded-xl shadow-md p-6 mb-10 border border-gray-100">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <!-- 支付记录ID -->
          <div class="info-item group">
            <label class="text-gray-500 text-sm block mb-2 flex items-center">
              <i class="el-icon-key mr-1.5"></i>支付记录ID
            </label>
            <div class="flex items-center">
              <span class="font-medium text-gray-800 truncate">{{ $route.query.out_trade_no || '未知' }}</span>
              <el-tooltip content="复制ID" placement="top">
                <i
                    class="el-icon-copy ml-2 text-gray-400 group-hover:text-blue-500 transition-colors cursor-pointer"
                    @click="copyText($route.query.out_trade_no)"
                ></i>
              </el-tooltip>
            </div>
          </div>

          <!-- 支付宝交易号 -->
          <div class="info-item group">
            <label class="text-gray-500 text-sm block mb-2 flex items-center">
              <i class="el-icon-s-order mr-1.5"></i>支付宝交易号
            </label>
            <div class="flex items-center">
              <span class="font-medium text-gray-800 truncate">{{ $route.query.trade_no || '未知' }}</span>
              <el-tooltip content="复制交易号" placement="top">
                <i
                    class="el-icon-copy ml-2 text-gray-400 group-hover:text-blue-500 transition-colors cursor-pointer"
                    @click="copyText($route.query.trade_no)"
                ></i>
              </el-tooltip>
            </div>
          </div>

          <!-- 支付金额 -->
          <div class="info-item">
            <label class="text-gray-500 text-sm block mb-2 flex items-center">
              <i class="el-icon-money mr-1.5"></i>支付金额
            </label>
            <span class="font-bold text-red-500 text-[clamp(1.1rem,2vw,1.3rem)]">
              {{ $route.query.total_amount ? '¥' + Number($route.query.total_amount).toFixed(2) : '¥0.00' }}
            </span>
          </div>

          <!-- 支付时间 -->
          <div class="info-item">
            <label class="text-gray-500 text-sm block mb-2 flex items-center">
              <i class="el-icon-clock mr-1.5"></i>支付时间
            </label>
            <span class="font-medium text-gray-800">
              {{ formatTimestamp($route.query.timestamp) || '未知' }}
            </span>
          </div>
        </div>
      </div>

      <!-- 操作按钮区域（双按钮布局，增强引导） -->
      <div class="button-group flex flex-col sm:flex-row justify-center gap-4">
        <!-- 主按钮：返回待缴费列表 -->
        <el-button
            type="primary"
            size="medium"
            @click="$router.push('/needPayList')"
            class="w-full sm:w-[220px] h-11 bg-gradient-to-r from-blue-500 to-blue-600 border-none hover:from-blue-600 hover:to-blue-700"
        >
          <i class="el-icon-arrow-left mr-2"></i>返回待缴费列表
        </el-button>

        <!-- 次按钮：查看交易记录 -->
        <el-button
            type="default"
            size="medium"
            @click="$router.push('/payList')"
            class="w-full sm:w-[220px] h-11 border-gray-200 hover:border-blue-300 text-gray-700 hover:text-blue-600"
        >
          <i class="el-icon-list mr-2"></i>查看交易记录
        </el-button>
      </div>

      <!-- 底部提示 -->
      <div class="text-center mt-8 text-gray-400 text-sm">
        <p>如有疑问，请联系客服热线：13500135005</p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElTooltip } from 'element-plus';

// 路由实例
const route = useRoute();
const router = useRouter();
// 卡片入场动画控制
const cardVisible = ref(false);

/**
 * 页面加载时触发入场动画+参数校验
 */
onMounted(() => {
  // 延迟触发动画，增强视觉体验
  setTimeout(() => {
    cardVisible.value = true;
  }, 100);

  // 校验核心参数
  const requiredParams = ['out_trade_no', 'total_amount', 'trade_no'];
  const missingParams = requiredParams.filter(param => !route.query[param]);

  if (missingParams.length > 0) {
    ElMessage.warning(`支付信息不完整，缺少参数：${missingParams.join(', ')}`);
  }
});

/**
 * 格式化支付宝时间戳（处理URL编码+优化显示）
 */
const formatTimestamp = (timestamp) => {
  if (!timestamp) return '';
  // 解码URL编码（%3A→冒号，%20→空格）
  const decodedTime = decodeURIComponent(timestamp);
  // 转换为“2025-09-22 17:23:31”格式
  return decodedTime.replace('T', ' ').replace(/\.\d+/, ''); // 去除毫秒数（可选）
};

/**
 * 复制文本到剪贴板
 */
const copyText = (text) => {
  if (!text) {
    ElMessage.warning('无可用文本可复制');
    return;
  }
  navigator.clipboard.writeText(text)
      .then(() => {
        ElMessage.success('复制成功');
      })
      .catch(() => {
        ElMessage.error('复制失败，请手动复制');
      });
};
</script>

<style scoped>
/* 基础容器样式 */
.pay-result-container {
  padding: 30px 20px;
  background-color: #fafbfc;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 5vh;
}

/* 背景装饰元素 */
.bg-decoration {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  z-index: 0;
  filter: blur(80px);
  opacity: 0.1;
}
.bg-decoration.top-left {
  top: -150px;
  left: -150px;
  background-color: #409eff;
}
.bg-decoration.bottom-right {
  bottom: -150px;
  right: -150px;
  background-color: #22c55e;
}

/* 结果卡片样式 */
.result-card {
  width: 100%;
  max-width: 650px;
  border-radius: 16px;
  padding: 40px 25px;
  background: #fff;
  position: relative;
  z-index: 1;
  border: none;
  transition: all 0.4s ease;
  opacity: 0;
  transform: translateY(20px);
}
/* 入场动画类 */
.result-card.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* 成功图标样式 */
.success-icon-wrapper {
  margin-top: -10px;
}
.animate-pulse-slow {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
  }
}

/* 信息卡片样式 */
.info-card {
  transition: all 0.3s ease;
}
.info-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}
.info-item {
  padding: 8px 0;
}

/* 按钮组样式 */
.button-group {
  margin-top: 5px;
}
.el-button {
  border-radius: 8px !important;
  font-size: 14px;
  font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .pay-result-container {
    padding: 20px 15px;
    padding-top: 3vh;
  }
  .result-card {
    padding: 30px 15px;
  }
  .info-card {
    padding: 40px 15px;
  }
  .button-group {
    gap: 10px;
  }
}

/* 适配Element Plus默认样式覆盖 */
::v-deep .el-tooltip__popper {
  font-size: 12px !important;
  padding: 4px 8px !important;
}
::v-deep .el-icon-copy {
  font-size: 16px;
}
</style>